<template>
	<view class="padding30rpx">
		<view class="tran-top">
			<view class="dis u-flex">
				<view style="width: 65%;">
					<view style="font-size: 30rpx;">{{vipInfo.postName||''}}会员续费</view>
					<view class="margin-top25rpx">{{vipInfo.stationmoney||''}}元/年</view>
					<view class="margin-top25rpx">{{vipInfo.currency}}学习币/年</view>
					<view class="margin-top25rpx" style="font-size: 20rpx;" v-if="vipInfo.daoTime">
						当前会员到期时间：{{vipInfo.daoTime}}</view>
				</view>
				<view style="font-size: 48rpx;">
					1年
				</view>
			</view>
		</view>
		<view v-if="userInfo.yesNo">
			<view style="margin-top: 60rpx;">
				<radio-group @change="chan">
					<label class="dis tran-wx margin-top25rpx" :class="{'wxbtn':ico == index}" @click="payBtn(index)"
						v-for="(item,index) in pay" :key="index">
						<view class="flexc">
							<image class="wx_img" :src="item.img"></image>
							<label style="font-size: 35rpx;" class="hui66lv">{{item.name}}</label>
						</view>
						<radio :value="item.id" :color="item.cor" :checked="item.id==activeRadio" />
					</label>
				</radio-group>
			</view>
			
			<view class="btn_box">
				<button @click="openPay">立即开通</button>
				<view style="text-align: center; margin-bottom: 20rpx; color: #999999; font-size: ;">
					<label @click="YOHU">《用户协议》、</label>
					<label @click="ZECE">《隐私政策》</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeRadio: '1', //存的是选中的value值
				Jname: '',
				time: '2020-02-02',
				wx: '',
				ico: '微信支付',
				//是否默认选中
				bianhao: 1,
				pay: [{
						id: 1,
						name: '微信支付',
						img: require('@/static/wx.png'),
						cor: '#00a29a'
					},
					{
						id: 2,
						name: '学习币支付',
						img: require('@/static/user/bi.png'),
						cor: '#00a29a'
					}
				],
				show: false,
				content: '',
				postId: '',
				vipInfo: []
			}
		},
		computed: {
			userInfo() {
				return this.$store.state['userinfo']
			}
		},
		onLoad(option) {
			this.Jname = option.name
			this.postId = option.id
			this.postId = option.pid || ''
			if (!this.postId) {
				this.$mHelper.toast('岗位信息错误')
				return;
			}
			this.getVipInfo();
		},
		methods: {
			getVipInfo() {
				this.$http.get('app/PostController/selectPostMemberOne', {
					postId: this.postId
				}).then(res => {
					if (res.code == 200) {
						this.vipInfo = res.data
						if (res.data.types == 1) {

						} else {
							// uni.redirectTo({
							// 	url: '/pages/study/choice/transaction/renew?pid=' + this.postId
							// })
						}
					} else {
						this.$mHelper.toast(res.message)
					}
					uni.hideLoading();
				})
			},
			//立即开通，选择支付方式
			openPay() {
				if (!this.postId) {
					this.$mHelper.toast('岗位信息错误')
					return;
				};
				if (this.activeRadio == 1) {
					console.log('1')
					// uni.showToast({})
					uni.showLoading()
					uni.request({
						method: 'POST',
						url: this.$api + '/app/pay/recharge',
						data: {
							balance: 0.1,
							payment: 2,
							prepaidTime: 0,
							"userId": "",
							postId: this.postId,
							types: 2
						},
						header: {
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							console.log(res.data.data, '------------')
							if (res.data.code == 200) {
								this.wxpay(res.data.data)
								uni.hideLoading()

							} else {
								setTimeout(() => {
									uni.hideLoading()
									uni.showToast({
										icon: 'none',
										title: '支付请求失败'
									})
								}, 2000)

							}
						}
					})
				} else {
					var mon = uni.getStorageSync('user')
					console.log('-', mon)

					console.log('toekn', uni.getStorageSync('token'))
					if (mon.currency <= 0) {
						this.content = '您当前学习币余额不足！'
						console.log('2')
						this.show = true
					} else {
						uni.request({
							method: 'GET',
							url: this.$api + '',
							data: {},
							header: {
								'token': uni.getStorageSync('token')
							},
							success: (res) => {
								console.log(res.data)
								if (res.data.code == 200) {
									uni.showToast({
										icon: 'success',
										title: '支付成功'
									})
									setTimeout(() => {
										uni.switchTab({
											url: '../../../user/user'
										})
									}, 2000)
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.message
									})
								}
							}
						})
					}
				}


			},
			wxpay(reson) {

				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: reson.nonceStr,
					package: reson.packageValue,
					signType: 'MD5',
					paySign: reson.paySign,
					timeStamp: reson.timeStamp,
					success: (res) => {
						console.log(res)
						uni.showToast({
							icon: 'success',
							title: '支付成功'
						})
						uni.reLaunch({
							url: '/pagesB/pay/pay'
						})
					},
					fail(err) {
						console.log(err);
						uni.showToast({
							icon: 'none',
							title: '支付失败'
						})
						console.log('支付失败')
					}
				})
			},
			//前往充值
			config() {
				uni.navigateTo({
					url: '/pagesA/balance/balance'
				})
			},
			chan(e) {
				this.activeRadio = e.detail.value;
				console.log(this.activeRadio);
			},
			//选择支付方式
			payBtn(i) {
				this.ico = i
			},
			radio(i) {
				this.bianhao = i
			},
			//用户协议
			YOHU() {
				this.$mHelper.to('/pagesA/protocol/protocol')
			},
			//隐私政策
			ZECE() {
				this.$mHelper.to('/pagesA/privacy/privacy')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn_box {
		position: fixed;
		bottom: 0;
		width: 92%;
		left: 0;
		left: 4%;
	}

	button {
		background: #00a29a;
		color: #FFFFFF;
		margin: 30rpx 0;
	}

	.wxbtn {
		border: 3rpx solid #00a29a;
		border-radius: 55rpx;
	}

	.tran-wx {
		border-radius: 55rpx;
		padding: 30rpx;
		border: 1rpx solid #e8e8e8;
	}

	.wx_img {
		width: 48rpx;
		height: 44rpx;
		margin-right: 30rpx;
	}

	.tran-right {
		text-align: center;
		width: 35%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tran_img {
		width: 200rpx;
		height: 190rpx;
	}

	.tran-top {
		border-radius: 10rpx;
		background: #00A29A;
		padding: 30rpx;
		color: #FFFFFF;
		// display: flex;
		// align-items: center;
	}
</style>
